<template>
	<view class="pg">
		<xb-navigation-bar status-bar-color="#127cf9" nav-bar-color="#127cf9" title-color="#FFF" :showBack="true"
			@backTap="backTapAction">

			<template v-slot:right>
				<view class="nav-r" style="padding: 0 20rpx;" @tap="saveAction">
					保存
				</view>
			</template>
		</xb-navigation-bar>

		<!-- 导航条占位距离 -->
		<!-- <view class="bar-fixed-top" :style="{height: topBarH + 'px'}"></view> -->

		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<!-- z-paging默认全屏  需要使用top插槽来处理导航条占位距离 -->
			<template v-slot:top>
				<view :style="{height: topBarH + 'px'}"></view>
			</template>
			
			<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
			<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
			<view class="v-t1" v-for="(item,index) in dataList" :key="index">
				<view class="item-title" @click="skipToDetail()">{{item}}</view>
			</view>
		</z-paging>


	</view>
</template>

<script>
	import xbNavigationBar from '../../components/xbNavigationBar.vue'
	import navBarUtils from '../../utils/navBarUtils'

	export default {
		components: {
			xbNavigationBar
		},

		data() {
			return {

				topBarH: 0,

				dataList: [],
				curPageNo: 1,

			}
		},

		onLoad() {


			// 更新顶部导航条占位距离
			this.updateNavTopPlacehoderMargin()

			// this.getData()



			let systemInfo = getApp().globalData
			// console.log('+++ globalData = ', systemInfo)
		},

		methods: {

			// 更新顶部导航条占位距离
			updateNavTopPlacehoderMargin() {

				let statusBarH = navBarUtils.geStatusBarHeight()
				let navbarHeightH = navBarUtils.getNavBarHeight()

				this.topBarH = statusBarH + navbarHeightH
				// console.log('+++ navbarHeightH = ', navbarHeightH)
				// console.log('+++ statusBarH = ', statusBarH, )
				// console.log('+++ topBarH = ', this.topBarH)
			},

			backTapAction() {
				uni.navigateBack({
					delta: 1
				})
			},

			// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用this.$refs.paging.reload()即可
			queryList(pageNo, pageSize) {
				
				console.log('+++ pageNo pageSize = ', pageNo, pageSize)
				
				// 此处请求仅为演示，请替换为自己项目中的请求
				setTimeout(() => {
					let list = [
						'000000',
						'1111111',
						'2222222',
						'333',
						'4444',
						'5555',
						'66666',
						'777777',
						'88888',
						'99999'
					]
					
					if(pageNo == 2){
						list = [
							'+++++ 000000',
							'+++++ 1111111',
							'+++++ 2222222',
							'+++++ 333',
							'+++++ 4444'
							
						]
					}
					// 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
					this.$refs.paging.complete(list);

					console.log('++++ dataList = ', this.dataList)

					// 			this.$refs.paging.reload()
				}, 1000)

			},

			// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用this.$refs.paging.reload()即可
			// getListData(pageNo, pageSize) {
			// 	console.log('+++ pageNo pageSize = ', pageNo, pageSize)
			// 	this.$httpUtils.request("https://api.xygeng.cn/one", {
			// 		pageNo,
			// 		pageSize
			// 	}).then((res) => {
			// 		console.log('+++ httpRequest res = ', res)
			// 		let resData = res.data || {}
			// 		if (resData.code == 200) {
			// 			let data = resData.data || {}

			// 			let list = []
			// 			for (let i = 0; i < 10; i++) {
			// 				list.push(data)
			// 			}

			// 			// 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
			// 			this.$refs.paging.complete(list);

			// 			console.log('++++ dataList = ', this.dataList)

			// 			this.$refs.paging.reload()

			// 		} else {
			// 			uni.showToast({
			// 				title: '请求失败'
			// 			})

			// 			// 如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
			// 			// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
			// 			// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
			// 			this.$refs.paging.complete(false);
			// 		}


			// 	}).catch((err) => {
			// 		// 如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
			// 		// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
			// 		// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
			// 		this.$refs.paging.complete(false);
			// 	})

			// },

			saveAction() {
				console.log("+++ saveAction")
			},
			
			skipToDetail() {
				console.log('+++ 跳转到详情页')
				uni.navigateTo({
					url: '/pages/home/detail'
				})
			}
		},
		
	}
	
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
		// background-color: honeydew;
	}
	
	.v-t1 {
		background-color: darkcyan;
		color: white;
		height: 80px;
		margin-top: 10rpx;
	}

	.pg {
		// background-color: #f5f5f5;
		// background-color: cyan;
		width: 100%;
		height: auto;


		.pg-body {

			.bar-fixed-top {}

			.v-t1 {
				background-color: rebeccapurple;
				height: 260px;
			}

			.v-t2 {
				background-color: red;
				height: 260px;
			}

			.v-t3 {
				background-color: yellow;
				height: 260px;
			}

			.v-t4 {
				background-color: blue;
				height: 260px;
			}

			.v-t5 {
				background-color: greenyellow;
				height: 260px;
			}
		}

	}
</style>